<nz-modal [(nzVisible)]="isVisible" [nzMaskClosable]="false" [nzTitle]="dictionary.id ? '字典详情' : '新增字典'"
  (nzOnCancel)="handleCancel()" [nzFooter]="detailFooter" nzWidth="400">

  <form nz-form [formGroup]="validateForm" #dictionaryForm="ngForm">
    <nz-form-item>
      <nz-form-label nzRequired [nzSpan]="6" nzFor="code">字典编码</nz-form-label>
      <nz-form-control [nzSpan]="14" nzHasFeedback nzValidatingTip="验证中..." [nzErrorTip]="codeErrorTpl">
        <input nz-input formControlName="code" [(ngModel)]="dictionary.code" placeholder="字典编码必填"
          *ngIf="!isPreView; else codeTemp">
        <ng-template #codeErrorTpl let-control>
          <ng-container *ngIf="control.hasError('required')">
            请输入字典编号!
          </ng-container>
          <ng-container *ngIf="control.hasError('duplicated')">
            该字典编码已存在!
          </ng-container>
          <ng-container *ngIf="control.hasError('blank')">
            不可输入空格!
          </ng-container>
        </ng-template>
        <ng-template #codeTemp>
          <div class="editable-cell">
            <div class="editable-cell-value-wrap text-truncate">
              {{ dictionary?.code }}
            </div>
          </div>
        </ng-template>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label nzRequired [nzSpan]="6" nzFor="name">字典名称</nz-form-label>
      <nz-form-control [nzSpan]="14" nzHasFeedback nzValidatingTip="验证中..." [nzErrorTip]="nameErrorTpl">
        <input nz-input formControlName="name" [(ngModel)]="dictionary.name" placeholder="字典名称必填"
          *ngIf="!isPreView; else nameTemp">
        <ng-template #nameErrorTpl let-control>
          <ng-container *ngIf="control.hasError('required')">
            请输入字典名称!
          </ng-container>
          <ng-container *ngIf="control.hasError('blank')">
            不可输入空格!
          </ng-container>
        </ng-template>
        <ng-template #nameTemp>
          <div class="editable-cell">
            <div class="editable-cell-value-wrap text-truncate">
              {{ dictionary?.name }}
            </div>
          </div>
        </ng-template>
      </nz-form-control>
    </nz-form-item>
  </form>

  <ng-template #detailFooter>
    <!-- <button nz-button nzType="default" (click)="preview()" *ngIf="!isPreView">
      <span>预览</span>
    </button>
    <button nz-button nzType="primary" (click)="preview()" *ngIf="isPreView">
      <span>编辑</span>
    </button> -->
    <button nz-button nzType="primary" (click)="save()" *ngIf="!isPreView" [nzLoading]="loading">
      <span>保存</span>
    </button>
    <button nz-button nzType="default" (click)="handleCancel()">关闭</button>
  </ng-template>
</nz-modal>
